<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<spring:message code="labels.name" var="name"></spring:message>
<spring:message code="labels.street" var="street"></spring:message>
<spring:message code="labels.number" var="number"></spring:message>
<spring:message code="labels.complement" var="complement"></spring:message>
<spring:message code="labels.district" var="district"></spring:message>
<spring:message code="labels.city" var="city"></spring:message>
<spring:message code="labels.country" var="country"></spring:message>
<spring:message code="labels.phone" var="phone"></spring:message>
<spring:message code="labels.phone.home" var="homephone"></spring:message>
<spring:message code="labels.phone.cell" var="cellphone"></spring:message>
<spring:message code="labels.phone.work" var="workphone"></spring:message>
<spring:message code="labels.email" var="email"></spring:message>
<spring:message code="labels.isCommercial" var="commercial"></spring:message>
<spring:message code="labels.isConfirmed" var="confirmed"></spring:message>
<spring:message code="labels.notes" var="notes"></spring:message>
<spring:message code="labels.add" var="add"></spring:message>
<spring:message code="labels.save" var="save"></spring:message>
<spring:message code="labels.cancel" var="cancel"></spring:message>

<div class="row">
	<div class="span10">
		<form id="entry" class="well form-horizontal">
			<div class="control-group">
				<label class="control-label" for="name">${name }</label>
				<div class="controls">
					<input type="text" class="span3" name="name" placeholder="${name}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="name">${country }</label>
				<div class="controls">
					<input type="text" class="span3" name="country"
						placeholder="${country}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="street">${street }</label>
				<div class="controls">
					<input type="text" class="span3" name="street"
						placeholder="${street}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="number">${number }</label>
				<div class="controls">
					<input type="text" class="span3" name="number"
						placeholder="${number}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="complement">${complement }</label>
				<div class="controls">
					<input type="text" class="span3" name="complement"
						placeholder="${complement}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="district">${district }</label>
				<div class="controls">
					<input type="text" class="span3" name="district"
						placeholder="${district}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="city">${city }</label>
				<div class="controls">
					<input type="text" class="span3" name="city" placeholder="${city}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="phone">${phone }</label>
				<div class="controls well" id="phone">
					<input type="text" class="span3" name="homephone"
						placeholder="${homephone}" /> <input type="text" class="span3"
						name="cellphone" placeholder="${cellphone}" /> <input type="text"
						class="span3" name="workphone" placeholder="${workphone}" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="emails">${email }</label>
				<div class="controls">
					<input type="text" class="span3" name="emails"
						placeholder="${email}" />
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<label class="checkbox"> <input type="checkbox"
						value="true" name="commercial"> ${commercial} </label>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<label class="checkbox"> <input type="checkbox"
						value="true" name="confirmed"> ${confirmed} </label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="notes">${notes }</label>
				<div class="controls">
					<textarea class="span3" id="notes" name="notes" rows="3"></textarea>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<a id="save" class="btn"> ${add} <i class="icon-plus-sign"></i>
					</a> <a id="saveAndExit" class="btn" href="/census#search"> ${save
						} <i class="icon-ok-sign"></i> </a> <a id="cancel" class="btn"
						href="/census#search"> ${cancel } </a>
				</div>
			</div>

		</form>
	</div>
	<div class="span2" id="queryResults"></div>
	<script type="text/javascript">
		require([ 'jquery', 'mustache', 'app', 'text!templates/entry/new.html',
				'i18n!nls/messages', 'domReady!' ], function($, m, a, entTmpl,
				bdl) {
			function save(e) {
				return $.ajax({
					url : '/census/entry',
					type : 'PUT',
					dataType : 'json',
					data : $('form#entry').serialize()
				}).error(function(err) {
					throw err;
				});
			}

			function exit() {
				a.go('/census/search');
			}
			$('a#save').click(
					function(e) {
						save(e).success(
								function(data) {
									$('form#entry').after(
											m.render(entTmpl, $.extend(
													data.entry, bdl)));
									$('form#entry')[0].reset();
								});
					});
			$('a#cancel').click(function(e){
				e.preventDefault();
				exit();
			});
			$('a#saveAndExit').click(function(e) {
				save(e).success(exit);
			});

		});
	</script>
</div>